<!-- 切换平台
	props:
		datas  平台数据
	action:
		openPop 显示弹窗
		closePop 关闭弹窗
		selectFn 选择平台（回到外层）
-->
<template>
    <uni-popup class="pop-check-cut" ref="checkCut" type="center" :animation="false" :maskClick="false">
        <view class="pop-check-cut-box">
            <view class="cut-title">
                <view class="title-left"></view>
                <view class="title-center">请选择您要进入的账号</view>
                <view class="title-right"></view>
            </view>
            <scroll-view class="scroll-box" :scroll-y="true" :show-scrollbar="false">
                <view class="cut-list">
                    <view class="cut-list-item" v-for="(item, index) in datas" :key="index" @click="selectFn(item)">
                        <view class="cut-left">
                            <image class="cut-logo" :src="easyGetUserImgUrl(item.Image)"></image>
                            <view class="cut-name">
                                <view class="cut-name-main">
                                    <text>{{ item.NickName }}</text>
                                 <!--   <view class="cut-cut">
                                        <view class="cut-bg"
                                            ><image class="vip-lv-img" src="/static/img/vip_1.png"></image
                                            >{{ item.GradeName }}</view
                                        >
                                    </view> -->
                                </view>
                                <text class="num" v-if="item.CompanyName">{{ item.CompanyName }}</text>
                                <text class="num">编号：{{ item.CustomerCode }}</text>
                            </view>
                        </view>
                        <view class="cut-right">
                            <image class="cut-right-icon" src="./icon_item_right@2x.png"></image>
                        </view>
                    </view>
                </view>
            </scroll-view>
            <image src="@/static/img/close_one.png" class="closeimg" @click="closePop"></image>
        </view>
    </uni-popup>
</template>

<script>
import cutDefaultLogo from "./icon_cut_default_logo.png"
export default {
    components: {},
    props: {
        datas: {
            type: Array,
            default: () => [],
        },
    },
    data() {
        return {}
    },
    mounted() {},
    methods: {
        openPop() {
            this.$refs.checkCut.open()
        },
        closePop() {
            this.$refs.checkCut.close()
        },
        selectFn(item) {
            this.$emit("selected", item)
            this.closePop()
        },
        getCutDefaultLogo() {
            return cutDefaultLogo
        },
    },
}
</script>

<style lang="scss">
.pop-check-cut-box {
    position: relative;
    width: 686rpx;
    background: #f5f5f5;
    border-radius: 32rpx;
    .closeimg {
        width: 64rpx;
        height: 64rpx;
        position: absolute;
        bottom: -96rpx;
        left: 50%;
        margin-left: -32rpx;
    }
    .cut-title {
        display: flex;
        justify-content: center;
        position: relative;
        top: -20rpx;
        .title-left {
            width: 0;
            height: 0;
            border-bottom: 20rpx solid $app-color-main;
            border-left: 10rpx solid transparent;
            position: relative;
        }
        .title-left::after {
            content: "";
            position: absolute;
            left: -10rpx;
            width: 0;
            height: 0;
            border-bottom: 20rpx solid rgba(0, 0, 0, 0.15);
            border-left: 10rpx solid transparent;
        }
        .title-center {
            width: 562rpx;
            height: 80rpx;
            background: $app-color-main;
            border-radius: 0px 0px 24rpx 24rpx;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 28rpx;
            color: #ffffff;
        }
        .title-right {
            width: 0;
            height: 0;
            border-bottom: 20rpx solid $app-color-main;
            border-right: 10rpx solid transparent;
            position: relative;
        }
        .title-right::after {
            content: "";
            position: absolute;
            right: -10rpx;
            width: 0;
            height: 0;
            border-bottom: 20rpx solid rgba(0, 0, 0, 0.15);
            border-right: 10rpx solid transparent;
        }
    }
    .scroll-box {
        max-height: 600rpx;
        .cut-list {
            padding: 18rpx 24rpx 0rpx;
            .cut-list-item {
                background: #ffffff;
                border-radius: 16rpx;
                height: 168rpx;
                padding: 0 24rpx;
                display: flex;
                justify-content: space-between;
                align-items: center;
                margin-bottom: 32rpx;
            }
            .cut-left {
                display: flex;
            }
            .cut-right {
                display: flex;
                align-items: center;
                .cut-right-icon {
                    width: 36rpx;
                    height: 22rpx;
                }
            }
        }

        .cut-logo {
            width: 80rpx;
            height: 80rpx;
            border-radius: 12rpx;
            margin-right: 24rpx;
        }
        .cut-name {
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            text {
                font-size: 32rpx;
                font-weight: bold;
            }
            .num {
                font-size: 24rpx;
                font-weight: normal;
                color: #999;
                padding-top: 5rpx;
            }
        }
        .cut-name-main {
            display: flex;
            align-items: center;
            justify-content: flex-start;
        }
        .cut-cut {
            height: 30rpx;
            background: #444444;
            transform: skew(-25deg);
            padding: 0 15rpx 0 0;
            display: flex;
            align-items: center;
            margin-left: 36rpx;
            .cut-bg {
                display: flex;
                align-items: center;
                transform: skew(25deg);
                font-size: 20rpx;
                color: #fff;
                image {
                    width: 44rpx;
                    height: 44rpx;
                    display: block;
                    margin-left: -15px;
                }
            }
        }
    }
}
</style>
